<template>
  <div :class="!isFullScreen ? 'chartMain main' : 'chartMainFullScreen main'">
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="chartList chartListLeftTop">
          <div class="bussinessTotalBox">
            <div class="bussinessTotal">
              <ul class="total">
                <li v-for="(i, index) in totalLists" :key="index">
                  <img :src="require('@/assets/num/' + i + '.png')" alt />
                </li>
              </ul>
              <div class="title">
                {{ isEnShi ? '参评主体数' : '参评企业数' }}
              </div>
              <img :src="require('@/assets/throughLine.png')" alt />
              <ul class="list">
                <li>
                  <div class="num" v-if="bussiness">
                    {{ bussiness.BULID_COMPANY || 0 }}
                  </div>
                  <div class="name">建设单位数</div>
                </li>
                <li>
                  <div class="num" v-if="bussiness">
                    {{ bussiness.CONSTRUCTOR || 0 }}
                  </div>
                  <div class="name">施工总承包数</div>
                </li>
                <li>
                  <div class="num" v-if="bussiness">
                    {{ bussiness.LABOUR_COMPANY || 0 }}
                  </div>
                  <div class="name">劳务公司数</div>
                </li>
              </ul>
            </div>
          </div>

          <div class="creditLevel">
            <div class="chartTitle">信用评级分布</div>
            <div class="chartContent" id="creditLevel"></div>
          </div>
        </div>
        <div class="chartList chartListLeftBottom" v-if="isEnShi">
          <div class="chartTitle">建设单位动态信用</div>
          <div class="govTotal">
            <div class="num">{{ govTotalB }}</div>
            <div class="name">总数</div>
          </div>
          <div class="chartContent" id="gov1"></div>
        </div>
        <div class="chartList chartListLeftBottom" v-else>
          <div class="chartTitle">
            政府投资动态信用<span>(仅统计已开工项目)</span>
          </div>
          <div class="govTotal">
            <div class="num">{{ govTotal }}</div>
            <div class="name">总数</div>
          </div>
          <div class="chartContent" id="gov"></div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="chartList">
          <div
            class="chartTitle"
            style="
              font-size: 14px;
              color: #6ff4ff;
              border-left: none;
              cursor: pointer;
            "
          >
            <span
              style="cursor: pointer"
              @click="changeMap(item, index)"
              v-for="(item, index) in areaArry"
              :key="index"
            >
              {{ item.label }}
              <span v-if="index < areaArry.length - 1">></span>
            </span>
          </div>
          <div class="chartContent" id="map"></div>
        </div>
        <div class="chartList chartListLast" v-if="isEnShi">
          <div class="chartListRightBottom chartListRightBottomES">
            <div class="chartTitle">施工总承包单位动态信用</div>
            <div class="govTotal">
              <div class="num">{{ govTotalC }}</div>
              <div class="name">总数</div>
            </div>
            <div class="chartContent" id="gov2"></div>
          </div>
          <div class="chartListRightBottom chartListRightBottomES">
            <div class="chartTitle">政府投资建设单位动态信用</div>
            <div class="govTotal">
              <div class="num">{{ govTotalA }}</div>
              <div class="name">总数</div>
            </div>
            <div class="chartContent" id="gov3"></div>
          </div>
        </div>
        <div class="chartList chartListLast" v-else>
          <div class="chartListRightBottom">
            <div class="chartTitle">
              行业动态信用分析<span>(仅统计已开工项目)</span>
            </div>
            <div class="chartContent" id="project"></div>
          </div>
          <div class="chartListRightBottom">
            <div class="chartTitle">项目动态评级统计</div>
            <div class="chartContent" id="projectTotal"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { drawLine, drawLineNM, drawPie, drawLineArea } from '@/kits/charts.js'
export default {
  name: 'dynamic',
  data() {
    return {
      areaType: '',
      bussiness: {},
      newResult: [],
      newResultA: [],
      newResultB: [],
      newResultC: [],
      screenWidth: window.screen.width, // 屏幕宽
      screeHeight: window.screen.height,
      screenTotalCalss: 'bussinessTotal',
      isEnShi: false,
      crditLevelList: [], //信用评级等级列表
      crditLevelListSet: [],
    }
  },
  props: {
    isFullScreen: {
      type: Boolean,
      default: false,
    },
    area: {
      type: String,
    },
  },
  computed: {
    totalLists: function () {
      if (this.bussiness.count) {
        let num = this.bussiness.count + ''
        return num.split('')
      }
    },
    areaArry() {
      return this.$store.state.changeArea
    },
    govTotal: function () {
      if (this.newResult) {
        let num = this.newResult
        let sum = 0
        num.forEach((item) => {
          sum += item.value
        })
        return sum
      }
      return 0
    },
    govTotalA: function () {
      if (this.newResultA) {
        let num = this.newResultA
        let sum = 0
        num.forEach((item) => {
          sum += item.value
        })
        return sum
      }
      return 0
    },
    govTotalB: function () {
      if (this.newResultB) {
        let num = this.newResultB
        let sum = 0
        num.forEach((item) => {
          sum += item.value
        })
        return sum
      }
      return 0
    },
    govTotalC: function () {
      if (this.newResultC) {
        let num = this.newResultC
        let sum = 0
        num.forEach((item) => {
          sum += item.value
        })
        return sum
      }
      return 0
    },
  },
  watch: {
    area(val) {
      //全国演示、内蒙、长春、
      if (!this.isEnShi) {
        this.getMapData(this.area.substring(0, 4))
        this.getMonthscoreData(this.area)
        this.getProject(val)
      } else {
        if (!this.isEnShi) {
          this.getcompanystats(val)
        } else {
          this.getAction(val, 0)
          this.getAction(val, 5)
        }
        this.getMapData(this.area.substring(0, 4))
      }
      this.getGov(val)
      this.getCridet(val)
    },
  },
  methods: {
    /**
     * @name: 获取信用等级配置接口
     * @param {type} string  default: 20
     * @Author: luoyong/471826078@qq.com
     */
    getCridetLevelList(type) {
      this.axios
        .post('api-ps/creditLevel/expand/getCreditLevelList', { type })
        .then((res) => {
          if (!res.data.hasError) {
            let arr = res.data.result
            let curArr = []
            arr.forEach((item) => {
              curArr.push(item.gradeLevel)
            })
            if (type == 20) {
              this.crditLevelList = curArr
            }
            if (type == '0') {
              this.crditLevelListSet = curArr
            }
          }
        })
    },

    drawMap(id, mydata, type, name) {
      let that = this
      let typeName = ''
      that.areaArry.forEach((item) => {
        if (item.areaId == type) {
          typeName = item.label
        }
      })

      typeName = '随州市'
      let func = null
      if (this.isEnShi) {
        func = (p) => {
          if (p.data) {
            return `施工单位在建参评项目数${p.data.total}个<br>
                    A+级占比:${p.data['A+']}个，${p.data.aUpScale}<br>
                    A-级占比:${p.data['A-']}个，${p.data.aDownScale}<br>
                    B+级占比:${p.data['B+']}个，${p.data.bUpScale}<br>
                    B-级占比:${p.data['B-']}个，${p.data.bDownScale}<br>
                    C级占比:${p.data.C}个，${p.data.cScale} `
          }
        }
      } else {
        func = (p) => {
          if (p.data) {
            let str = `在建参评项目数${p.data.total}个<br>`
            that.crditLevelList.forEach((item) => {
              str += `${item}级占比:${p.data[item]}<br>`
            })
            return str
          }
        }
      }
      var optionMap = {
        backgroundColor: '#FFFFFF',
        tooltip: {
          trigger: 'item',
          formatter: func,
        },

        //左侧小导航图标

        visualMap: {
          min: 0,
          max: 100,
          text: ['低风险', '高风险'],
          x: 'left',
          y: 'bottom',
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#C62625', '#d4ed05', '#09981C'],
          },
          inverse: true,
          textStyle: {
            color: '#fff',
          },
        },
        backgroundColor: 'transparent',

        //配置属性
        series: [
          {
            name: '数据',
            type: 'map',
            map: name == '2' ? 'china' : typeName,
            // 去掉拖拽
            roam: false,
            itemStyle: {
              normal: {
                color: '#fff',
                borderColor: '#6DEFFF',
                areaColor: 'transparent',
                areaStyle: { areaColor: 'transparent', color: '#fff' },
                textStyle: {
                  color: '#fff', //省份字体颜色
                },
              },
            },
            label: {
              normal: {
                position: 'center',
                show: true, //省份名称
                textStyle: {
                  color: '#FFF',
                },
              },
              emphasis: {
                show: false,
              },
            },
            data: mydata, //数据
          },
        ],
      }
      if (this.isWhUser()) {
        optionMap.series[0].label.normal.show = false
        let funcs = (p) => {
          if (p.data) {
            let str =
              `${p.data.name}<br>` + `在建参评项目数${p.data.total}个<br>`
            that.crditLevelList.forEach((item) => {
              str += `${item}级占比:${p.data[item]}<br>`
            })
            return str
          }
        }
        optionMap.tooltip = {
          trigger: 'item',
          formatter: funcs,
        }
      }
      var hosts = window.location.host
      var protocol = document.location.protocol
      let host
      if (hosts.indexOf('localhost') != -1) {
        host = protocol + '//' + hosts + '/static/'
      } else {
        host = window.location.pathname + 'static/'
      }
      let url = ''
      if (type.length == 2) {
        url = `js/json/geometryProvince/${type}.json`
      } else if (type.length == 6) {
        url = `js/json/geometryCouties/${type}.json`
      } else if (type.length == 4) {
        url = `js/json/geometryCouties/${type}00.json`
      } else {
        url = `js/json/china.json`
      }
      that.axios.get(host + url).then((res) => {
        if (res) {
          echarts.registerMap(typeName, res.data)
          let mapChart = echarts.init(document.getElementById(id))

          mapChart.setOption(optionMap)
          mapChart.off('click')
          mapChart.on('click', function (params) {
            if (params.data) {
              let arr = that.$store.state.changeArea
              let curenArea = {}
              if (params.data.areaId) {
                curenArea = {
                  areaId: params.data.areaId,
                  label: params.data.areaName
                    ? params.data.areaName
                    : params.data.name,
                }
                let lastObj = arr[arr.length - 1]
                if (
                  params.data.areaId &&
                  params.data.areaId.length > lastObj.areaId.length
                ) {
                  arr.push(curenArea)
                } else {
                  arr.pop()
                  arr.push(curenArea)
                }
              }
              that.$store.commit('SET_INFO', ['changeArea', arr])
            } else {
            }
          })
          window.addEventListener('resize', () => {
            mapChart.resize()
          })
        } else {
          that.drawMap(id, mydata, that.$store.state.areaInfoArr.areaId)
        }
      })
    },
    //企业总数统计
    getcompanystats(areaId) {
      // if(this.isEnShi){
      this.axios
        .post('api-ps/creditCompanyScore/expand/companystats', { areaId })
        .then((res) => {
          if (!res.data.hasError) {
            this.bussiness = JSON.parse(res.data.result)
          } else {
            this.bussiness = {
              count: 0,
              BULID_COMPANY: 0,
              LABOUR_COMPANY: 0,
              CONSTRUCTOR: 0,
            }
          }
        })
      // }else{
      // this.axios
      // .get("api-c/company/expand/companystats",{params: { areaId }} )
      // .then((res) => {

      //   if (!res.data.hasError) {
      //     this.bussiness = JSON.parse(res.data.result);
      //   } else {
      //     this.bussiness = {
      //       count: 0,
      //       BULID_COMPANY: 0,
      //       LABOUR_COMPANY: 0,
      //       CONSTRUCTOR: 0,
      //     };
      //   }
      // });
      // }
    },
    //政府投资建设单位动态信用
    getGov(areaId) {
      this.axios
        .get(
          this.isEnShi
            ? 'api-ps/creditProjectScore/expand/govprojectlevel'
            : 'api-ps/creditProjectScore/expand/govcreditstats',
          {
            params: { areaId },
          }
        )
        .then((res) => {
          if (!res.data.hasError) {
            if (this.isEnShi) {
              let result = res.data.result[0]
              this.newResultA = [
                { name: 'A+', value: result['A+'] ? result['A+'] : 0 },
                { name: 'A-', value: result['A-'] ? result['A-'] : 0 },
                { name: 'B+', value: result['B+'] ? result['B+'] : 0 },
                { name: 'B-', value: result['B-'] ? result['B-'] : 0 },
                { name: 'C', value: result['C'] ? result['C'] : 0 },
              ]
              drawPie({ id: 'gov3', data: this.newResultA })
            } else {
              let arr = res.data.result
              let curArr = []
              if (!arr.length) {
                return false
              }
              this.crditLevelList.forEach((item) => {
                let flag = 0
                arr.forEach((m) => {
                  if (m.name == item) {
                    flag = m.value
                  }
                })
                curArr.push({ name: item, value: flag })
              })
              this.newResult = curArr
              if (curArr.length) {
                drawPie({ id: 'gov', data: this.newResult })
              }
            }
          } else {
            if (this.isEnShi) {
              this.newResultA = [
                { name: 'A+', value: 0 },
                { name: 'A-', value: 0 },
                { name: 'B+', value: 0 },
                { name: 'B-', value: 0 },
                { name: 'C', value: 0 },
              ]
            } else {
              let curArr = []
              this.crditLevelList.forEach((item) => {
                curArr.push({ name: item, value: 0 })
              })
              this.newResult = curArr
            }
          }
          if (this.isEnShi) {
          } else {
          }
        })
    },
    //施工总承包单位动态信用 --恩施地区定制接口
    getAction(areaId, type) {
      this.axios
        .get('api-c/company/expand/buildcompanystats', {
          params: { areaId, type },
        })
        .then((res) => {
          if (!res.data.hasError) {
            let result = res.data.result
            if (type == 0) {
              this.newResultB = [
                { name: 'A+', value: result['A+'] ? result['A+'] : 0 },
                { name: 'A-', value: result['A-'] ? result['A-'] : 0 },
                { name: 'B+', value: result['B+'] ? result['B+'] : 0 },
                { name: 'B-', value: result['B-'] ? result['B-'] : 0 },
                { name: 'C', value: result['C'] ? result['C'] : 0 },
              ]
            } else if (type == 5) {
              this.newResultC = [
                { name: 'A+', value: result['A+'] ? result['A+'] : 0 },
                { name: 'A-', value: result['A-'] ? result['A-'] : 0 },
                { name: 'B+', value: result['B+'] ? result['B+'] : 0 },
                { name: 'B-', value: result['B-'] ? result['B-'] : 0 },
                { name: 'C', value: result['C'] ? result['C'] : 0 },
              ]
            }
          } else {
            if (type == 0) {
              this.newResultB = [
                { name: 'A+', value: 0 },
                { name: 'A-', value: 0 },
                { name: 'B+', value: 0 },
                { name: 'B-', value: 0 },
                { name: 'C', value: 0 },
              ]
            } else if (type == 5) {
              this.newResultC = [
                { name: 'A+', value: 0 },
                { name: 'A-', value: 0 },
                { name: 'B+', value: 0 },
                { name: 'B-', value: 0 },
                { name: 'C', value: 0 },
              ]
            }
          }
          if (type == 5) {
            drawPie({ id: 'gov2', data: this.newResultC })
          } else if (type == 0) {
            drawPie({ id: 'gov1', data: this.newResultB })
          }
        })
    },
    //信用评级
    getCridet(areaId) {
      this.axios
        .post(
          this.isEnShi
            ? 'api-ps/creditCompanyScore/expand/creditrating'
            : 'api-ps/creditCompanyScore/expand/databigcomcredit',
          { areaId }
        )
        .then((res) => {
          if (!res.data.hasError) {
            let curData = res.data.result
            if (this.isEnShi) {
              let data1 = curData[0]
              let data2 = curData[1]
              curData[0] = data2
              curData[1] = data1
              let curDataA = [],
                curDataB = [],
                curDataC = [],
                curDataD = [],
                curDataE = []
              curData.forEach((item) => {
                item.forEach((items, index) => {
                  if (index == 0) {
                    curDataA.push(items)
                  }
                  if (index == 1) {
                    curDataB.push(items)
                  }
                  if (index == 2) {
                    curDataC.push(items)
                  }
                  if (index == 3) {
                    curDataD.push(items)
                  }
                  if (index == 4) {
                    curDataE.push(items)
                  }
                })
              })
              let result = [
                {
                  name: 'A+',
                  type: 'bar',
                  barWidth: 10,
                  data: curDataA,
                },
                {
                  name: 'A-',
                  type: 'bar',
                  barWidth: 10,
                  data: curDataB,
                },
                {
                  name: 'B+',
                  type: 'bar',
                  barWidth: 10,
                  data: curDataC,
                },
                {
                  name: 'B-',
                  type: 'bar',
                  barWidth: 10,
                  data: curDataD,
                },
                {
                  name: 'C',
                  type: 'bar',
                  barWidth: 10,
                  data: curDataE,
                },
              ]

              drawLine({
                id: 'creditLevel',
                crditLevel: result,
                xData: ['建设单位', '施工总承包', '劳务公司'],
              })
            } else {
              let arr = ['建设方', '施工方', '分包单位']
              let arrs = []
              arr.forEach((item) => {
                curData.forEach((m) => {
                  if (item == m.name) {
                    arrs.push(m)
                  }
                })
              })
              if (this.crditLevelListSet.length) {
                drawLineNM({
                  id: 'creditLevel',
                  crditLevel: this.crditLevelListSet,
                  curData: arrs,
                })
              }
            }
          }
        })
    },
    handleCridet(arr) {
      let curArr = [
        { name: 'BULID_COMPANY', value: 0 },
        { name: 'CONSTRUCTOR', value: 0 },
        { name: 'LABOUR_COMPANY', value: 0 },
      ]
      arr.forEach((item) => {
        if (item.typeName == 'BULID_COMPANY') {
          curArr[0].value = item.companyTypeCount
        }
        if (item.typeName == 'CONSTRUCTOR') {
          curArr[1].value = item.companyTypeCount
        }
        if (item.typeName == 'LABOUR_COMPANY') {
          curArr[2].value = item.companyTypeCount
        }
      })
      let result = []
      curArr.forEach((item) => {
        result.push(item.value)
      })
      return result
    },
    //行业动态信用分析接口（除恩施外）
    getProject(areaId) {
      this.axios
        .get('api-ps/creditProjectScore/expand/industycreditstats', {
          params: { areaId },
        })
        .then((res) => {
          if (!res.data.hasError) {
            let curData = res.data.result
            const dataZoom = {
              realtime: true, //拖动滚动条时是否动态的更新图表数据
              height: 10, //滚动条高度
              bottom: 5,
              start: 0, //滚动条开始位置（共100等份）
              end: 100, //结束位置（共100等份）
            }
            drawLineNM({
              id: 'project',
              dataZoom,
              crditLevel: this.crditLevelList,
              curData,
            })
          }
        })
    },
    //地图数据
    getMapData(areaId) {
      this.axios
        // .get("api-ps/creditProjectScore/expand/projectmap", { params: { areaId } })api-ps/creditProjectScore/expandangermap
        .get(
          this.isEnShi
            ? 'api-ps/creditProjectScore/expand/projectmap'
            : 'api-ps/creditProjectScore/expand/dangermap',
          { params: { areaId } }
        )

        .then((res) => {
          if (!res.data.hasError) {
            let arr = res.data.result
            if (arr.length) {
              arr.forEach((item) => {
                item.areaId = item.areaId ? item.areaId : item.id
                item.name = item.name ? item.name : item.areaName
                item.value = item.value ? item.value : item.dangerValue
              })
            }
            this.drawMap('map', arr, this.area)
          }
        })
    },
    //api-ps/projectscore/expand/findmonthscore
    //项目动态评级统计
    getMonthscoreData(areaId) {
      this.axios
        // .get("api-ps/projectscore/expand/findmonthscore", {api-p/creditProjectScore/expand/procreditstats
        .get('api-ps/creditProjectScore/expand/procreditstats', {
          params: { areaId },
        })
        .then((res) => {
          let that = this
          let obj = res.data.result
          let arr = []
          let countArr = []
          let monthArr = []
          obj.forEach((item) => {
            monthArr.push(item.name + '月')
          })
          //计算每一种等级数据的集合
          if (this.crditLevelList.length) {
            this.crditLevelList.forEach((item, index) => {
              let itemArr = []
              let sum = 0
              obj.forEach((m, i) => {
                itemArr.push(m[item])
              })
              arr[index] = {
                name: item,
                type: 'bar',
                yAxisIndex: 0,
                barWidth: 3, //柱图宽度
                data: itemArr,
              }
            })
          }
          if (obj.length) {
            obj.forEach((item, index) => {
              let itemArr = []
              let sum = 0
              that.crditLevelList.forEach((m, i) => {
                sum += item[m]
              })
              countArr.push(sum)
            })
          }
          drawLineArea(
            'projectTotal',
            this.crditLevelList,
            arr,
            countArr,
            monthArr,
            1
          )
        })
    },
    changeMap(item, index) {
      let currentArea = []
      if (index == 0) {
        currentArea = this.$store.state.changeArea.slice(0, 1)
      } else if (index == 1) {
        currentArea = this.$store.state.changeArea.slice(0, 2)
      }
      this.$store.commit('SET_INFO', ['changeArea', currentArea])
    },
  },
  mounted() {
    this.isEnShi = this.isEsUser()
    if (this.screenWidth < 1440) {
      if (this.screenWidth / this.screeHeight == 5 / 4) {
        this.screenTotalCalss = 'bussinessTotal totalOne'
      } else if (this.screenWidth / this.screeHeight == 4 / 3) {
        this.screenTotalCalss = 'bussinessTotal totalTwo'
      } else if (this.screenWidth / this.screeHeight == 8 / 5) {
        this.screenTotalCalss = 'bussinessTotal totalThree'
      } else if (this.screenWidth / this.screeHeight == 16 / 9) {
        this.screenTotalCalss = 'bussinessTotal totalFore'
      } else if (this.screenWidth / this.screeHeight == 5 / 3) {
        this.screenTotalCalss = 'bussinessTotal totalFive'
      }
    } else {
      if (this.screenWidth == 1600 && this.screeHeight == 900) {
        this.screenTotalCalss = 'bussinessTotal totalFore'
      }
    }
    this.getCridetLevelList(20)
    this.getCridetLevelList(0)
    //全国演示、内蒙、长春、
    if (!this.isEnShi) {
      this.getMapData(this.area.substring(0, 4))
      this.getMonthscoreData(this.area)
      this.getProject(this.area)
    } else {
      this.getAction(this.area, 0)
      this.getAction(this.area, 5)
      this.getMapData(this.area.substring(0, 4))
    }
    this.getGov(this.area)
    this.getCridet(this.area)
    this.getcompanystats(this.area)
  },
}
</script>
<style lang="less" scoped>
.chartMain {
  height: calc(100% - 56px);
}
.chartMainFullScreen {
  height: calc(100% - 116px);
}
@media screen and (max-width: 1366px) {
  .chartTitle {
    height: 12px !important;
    line-height: 12px !important;
    font-size: 12px !important;
    top: 12px !important;
    span {
      font-size: 10px;
    }
  }
  .chartContent {
    padding-top: 8px !important;
  }
  .chartHeaderMenu {
    width: 100%;
    text-align: center;
    &List {
      width: 90px !important;
      font-size: 13px !important;
    }
  }
}

.main {
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      .chartList {
        background-color: rgba(29, 65, 96, 0.5);
        padding: 0 10px;
        height: calc(35% - 5px);
        position: relative;
        &:first-child {
          height: calc(65% - 5px);
          margin-bottom: 10px;
        }
        .chartTitle {
          height: 16px;
          line-height: 16px;
          border-left: 3px solid #009588;
          padding-left: 8px;
          // left: 10px;
          position: absolute;
          font-size: 16px;
          color: #ffffff;
          top: 16px;
          font-weight: bold;
          z-index: 20;
          span {
            font-size: 14px;
            color: #7a8b9b;
            padding-left: 5px;
          }
        }
        .chartContent {
          padding-top: 15px;
          height: calc(100%);
        }
      }
    }
  }
  .chartListLeftTop {
    padding: 0 10px;
    .bussinessTotalBox {
      height: calc(40%);
      line-height: 1;
      border-bottom: 1px solid #1c405b;
      position: relative;
    }
    .bussinessTotal {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      transform: translate(-50%, -50%);
      padding-top: 20px;
      img {
        width: 94px;
        height: 4px;
        display: block;
        margin: 4px auto;
      }
      .total {
        width: 100%;
        text-align: center;
        li {
          display: inline-block;
          width: 32px;
          height: 45px;
          line-height: 45px;
          margin-right: 6px;
          background-color: #1c405b;
          color: #53ffac;
          font-size: 40px;
          background-image: url('./../../../assets/cocle.png');
          background-size: 100% 100%;
          img {
            width: 20px;
            height: 36px;
          }
        }
      }

      .title {
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        color: #fff;
        margin-top: 16px;
        text-align: center;
      }
      .list {
        margin-top: 12px;
        width: 100%;
        text-align: center;
        li {
          display: inline-block;
          width: 31%;
          text-align: center;
          .num {
            font-size: 20px;
            line-height: 24px;
            color: #53ffac;
          }
          .name {
            font-size: 14px;
            line-height: 18px;
            color: #fff;
          }
        }
      }
    }
    .totalOne {
      padding-top: 4% !important;
    }
    .totalTwo {
      .total {
        li {
          width: 28px;
          height: 40px;
          line-height: 40px;
          margin-right: 3px;
          img {
            width: 20px;
            height: 33px;
          }
        }
      }
      .title {
        margin-top: 6px !important;
      }
    }
    .totalThree {
      padding-top: 3% !important;
      .total {
        li {
          width: 24px;
          height: 34px;
          line-height: 34px;
          margin-right: 3px;
          img {
            width: 18px;
            height: 26px;
          }
        }
      }
      .title {
        margin-top: 6px !important;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
      }
      .list {
        margin-top: 0px !important;
        .num {
          font-size: 14px !important;
          line-height: 18px !important;
        }
        .name {
          font-size: 12px !important;
          line-height: 16px !important;
        }
      }
    }
    .totalFore {
      padding-top: 3% !important;
      .total {
        li {
          width: 22px;
          height: 30px;
          line-height: 30px;
          margin-right: 3px;
          img {
            width: 16px;
            height: 22px;
          }
        }
      }
      img {
        margin: 2px auto !important;
      }
      .title {
        margin-top: 6px !important;
        height: 12px;
        line-height: 12px;
        font-size: 12px;
      }
      .list {
        margin-top: 0px !important;
        .num {
          font-size: 12px !important;
          line-height: 14px !important;
        }
        .name {
          font-size: 12px !important;
          line-height: 14px !important;
        }
      }
    }
    .totalFive {
      padding-top: 3% !important;
      .total {
        li {
          width: 24px;
          height: 34px;
          line-height: 34px;
          margin-right: 3px;
          img {
            width: 18px;
            height: 26px;
          }
        }
      }
      .title {
        margin-top: 6px !important;
        height: 12px;
        line-height: 12px;
        font-size: 12px;
      }
      .list {
        margin-top: 0px !important;
        .num {
          font-size: 12px !important;
          line-height: 14px !important;
        }
        .name {
          font-size: 12px !important;
          line-height: 14px !important;
        }
      }
    }
    .creditLevel {
      height: calc(60%);
      position: relative;
    }
  }
  .chartListLast {
    background-color: #31546b !important;
    padding: 0 !important;
  }
  .chartListRightBottom {
    position: relative;
    display: inline-block;
    background-color: rgba(29, 65, 96, 0.5);
    padding: 0 10px;
    width: calc(50% - 5px);
    height: calc(100%);
  }
}
.chartListLeftBottom,
.chartListRightBottomES {
  position: relative;
  .govTotal {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -40%);
    text-align: center;
    .num {
      color: #53ffac;
      font-size: 18px;
    }
    .name {
      color: #fff;
      font-size: 14px;
      line-height: 18px;
    }
  }
}
</style>
